<template>
  <div class="login">
    <div class="loginall">
      
      <div class="login1">
        <img src="../assets/image/pic/logo/orange.png" alt="">
      </div>

      <ul class="login2">
        <li class="login2a">
          <input type="text" placeholder="手机号" class="login2b" v-model="userInfo.phone">
        </li>
        <li class="login2a">
          <input type="text" placeholder="密码" class="login2b" v-model="userInfo.password">
        </li>
      </ul>

      <div class="login3" @click="login">
        登录
      </div>
    </div>
  </div>
</template>
<script>
import {Login} from '../util/request/api'

export default {

  data() {
    return {
      userInfo:{
        phone:'',
        password:''
      }
    }
  },
  methods: {
    // 登录验证死的数据
    // login(){
    //   if (this.userInfo.name=='' || this.userInfo.pass=='') {
    //     alert('要填写完整')
    //   }else if (this.userInfo.name=='deng' && this.userInfo.pass=='123') {
    //     // 登陆成功登录状态存到离线存储中
    //     sessionStorage.setItem('isLogin',true)
    //     // 登陆成功跳转到home
    //     this.$router.push('/home')
    //   }else{
    //     alert('no')

    //   }
    //   console.log(this.userInfo,'denglu');
    // }
    login(){
            if (this.userInfo.phone == "" || this.userInfo.password == "") {
        alert("用户名密码不能为空");
      } else {

        //调用登录接口
        // this.$axios.post("/api/login", this.userInfo)
        Login(this.userInfo)
        .then((res) => {
          if (res.code == 200) {
            //如果登录成功，把登录状态存储到离线存储中，建议用sessionStorage
            sessionStorage.setItem("isLogin",JSON.stringify(res.list));
            // 成功之后跳转到个人中心
            this.$router.push("/usercenter");
          } else {
            alert(res.msg,'失败');
          }
        });
      }
    }
  },
};
</script>
<style scoped>
.login{
  width: 7.1rem;
  height: 13rem;
  /* background: royalblue; */
  margin: 0 auto;
  margin-top: 2rem;
  padding-top: 0.2rem;
}
.login .loginall{
  width: 6.1rem;
  height: 4.35rem;
  margin: 0 auto;
  padding-top: 4rem;
  /* background: saddlebrown; */
  display: flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.login .loginall .login1{
  width: 3.64rem;
  height: 0.98rem;
}
.login .loginall .login1 img{
  width: 3.64rem;
  height: 0.98rem;
}
.login3{
  width: 6.1rem;
  height: 1rem;
  /* background: chartreuse; */
  color: white;
  line-height: 1rem;
  background: #CCCCCC;
  text-align: center;
}
.login2b{
  width: 6.1rem;
  height: 0.8rem;
}
</style>
    
